<template>
  <div class="headContainer">
    <loading :state="loading"></loading>
    <div class="functionContainer">
      <p class="p1 con">我的兑换券({{num}}张)</p>
      <div class="th-line"></div>
      <convert-item :mockData="mockData"></convert-item>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import ConvertItem from '@/components/user/ConvertItem';
  //  兑换券
  export default {
    components: {ConvertItem},
    name: 'userConvert',

    data() {
      return {
        // mock数据
        mockData: {
          vip: {
            num: 0,
            time: 0
          },
          top: {
            num: 0,
            time: 0
          }
        },
        loading: true
      };
    },
    props: {},
    created() {
      this.getData();
    },
    methods: {
      getData() {
        this.$UserReq.getConvert().then((res) => {
          this.mockData = res.data;
          this.loading = false;
        }, () => {
          console.log('完蛋了');
        });
      }
    },
    computed: {
      num() {
        return this.mockData.vip.num + this.mockData.top.num;
      }
    }
  };
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "../../assets/stylus/main.styl";
  .headContainer {
    padding: 0 4vw;
    width: 100vw;
    box-sizing border-box
    background-color: bk-color;
    .functionContainer {
      background white
      border-radius: 5px;
      .p1 {
        word-vw(14px, first-ash)
      }
      .con {
        line-height 12vw
        text-align center
      }
    }
  }

  .th-line {
    width 100%
    height 1px
    background bk-color
  }

  .th-line-sec {
    margin-top 2vw
  }
</style>
